<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>风暴英雄助手</title>

        <link rel="stylesheet" href="css/common.css" />
        <link rel="stylesheet" href="css/index.css" />
        <link rel="stylesheet" href="css/shop.css" />
        <link rel="stylesheet" href="css/talent.css" />
        <link rel="stylesheet" href="css/special.css" />

    </head>

    <body onselectstart="return false">
        <div id="page">
             
            
        </div>

        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/underscore.js"></script>
        <script src="js/backbone.js"></script>
        <script src="js/json2.js"></script>
        

        <script src="js/util.js"></script>
        <script src="js/index.js"></script>

        <script id="page_template" type="text/template">
            <div id="navbar">
                <!-- <span id="backArrow"></span> -->
                <div id="tabWrapper" class="clearfix">
                    <div id="tab_shop" class="tab active"><a href="#shop"></a></div>
                    <div id="tab_talent" class="tab"><a href="#talent"></a></div>
                </div>
            </div>

            <div id="main" class="clearfix">
                
            </div>

            <div id="footer">
                <div id="userInfo">
                    <img id="userFace" src="img/face/0.jpg" />
                    <span id="userName"></span>
                </div>
                <div id="startButton"></div>
            </div>
            
            
            
            <div id="disabled_mask">
                <img id="function_disabled" src="img/function_disabled.png" />
                <div class="text">可在&nbsp;“<span onclick="appGlobal.onSetting()">设置</span>”&nbsp;中重新开启</div>
            </div>
            
            <div id="tips_horse" class="tips">
                
            </div>
            <div id="tips_talent" class="tips">
                <span class="name"></span>
                <span class="descr"></span>
            </div>
            
            <div class="none" id="mask"></div>

            <!-- modal模板 
            <div class="modal in" id="">
                <div class="modal_head">
                    <span class="close"></span>
                </div>
                <div class="modal_body">

                </div>
                <div class="modal_foot">

                </div>
            </div> 
            -->

            <div class="modal out" id="update1_modal">
                <div class="modal_head">
                </div>
                <div class="modal_body">
                    <ul class="newFeature">
                        <li>新坐骑新坐骑新坐骑新坐骑</li>
                        <li>新英雄新英雄新英雄新英雄</li>
                    </ul>
                </div>
                <div class="modal_foot">
                    <div class="update_button button"></div>
                </div>
            </div>
            
            <div class="modal out" id="update2_modal">
                <div class="modal_head">
                </div>
                <div class="modal_body">
                    <iframe class="carousel" scrolling="no" width="500px" height="220px" frameborder="0" src=""></iframe>
                </div>
                <div class="modal_foot">
                    <div class="progressWrapper">
                        <div class="content">
                            <span class="expand"></span>
                        </div>
                    </div>
                    <span class="percent">0%</span>
                </div>
            </div>
            
            <div class="modal out" id="update3_modal">
                <div class="modal_head">
                </div>
                <div class="modal_body">

                </div>
                <div class="modal_foot">
                    <div class="restart_button button"></div>
                </div>
            </div>
            
            <div class="modal out" id="update_gameRunning_modal">
                <div class="modal_head">
                    <span class="close"></span>
                </div>
                <div class="modal_body">
                    
                </div>
                <div class="modal_foot">
                    <div class="retry_button button"></div>
                    <div class="cancel_button button close"></div>
                </div>
            </div>
            
            <div class="modal out" id="update_error_modal">
                <div class="modal_head">
                    <span class="close"></span>
                </div>
                <div class="modal_body">
                    
                </div>
                <div class="modal_foot">
                    <div class="redownload_button button"></div>
                    <div class="cancel_button button close"></div>
                </div>
            </div>
            
            
            <div class="modal out first_tips_modal" id="first_shop_tips_modal">
                <div class="modal_head">
                    <span class="close"></span>
                </div>
                <div class="modal_body">

                </div>
                <div class="modal_foot">
                    <div class="close button"></div>
                </div>
            </div>
            
            <div class="modal out first_tips_modal" id="first_talent_tips_modal">
                <div class="modal_head">
                    <span class="close"></span>
                </div>
                <div class="modal_body">
                    
                </div>
                <div class="modal_foot">
                    <div class="close button"></div>
                </div>
            </div>            
                         
            <div class="modal out" id="modal_option">
                <div class="modal_head">
                    <span class="close"></span>
                </div>
                <div class="modal_body" >
                    <div class="active" id="enableHorse" style="top:103px;right:18px;"><span class="check"></span></div>
                    <div class="active" id="enableTalent" style="top:147px;right:18px;"><span class="check"></span></div>
                </div>
                <div class="modal_foot">

                </div>
            </div>
            
            <div class="modal out" id="modal_talent_detail">
                <div class="modal_head">
                    <img class="face" src="img/hero_02_face.png" />
                    <span class="name">迪亚波罗</span>
                    <span> — 天赋方案</span>
                    <span class="close"></span>
                </div>
                <div class="modal_body clearfix">
                    <ul class="mapList clearfix">
                        <li data-mid="1">
                            <span class="color" style="background-color: rgb(178,204,86);"></span><span class="name">黑心湾</span>
                        </li>
                        <li data-mid="2">
                            <span class="color" style="background-color: rgb(215,21,47);"></span><span class="name">巨龙郡</span>
                        </li>
                        <li data-mid="3">
                            <span class="color" style="background-color: rgb(230,77,72);"></span><span class="name">亡骨矿坑</span>
                        </li>
                        <li data-mid="4">
                            <span class="color" style="background-color: rgb(177,55,205);"></span><span class="name">诅咒谷</span>
                        </li>
                        <li data-mid="5">
                            <span class="color" style="background-color: rgb(64,112,173);"></span><span class="name">恐魔园</span>
                        </li>
                    </ul>
                    <div class="planListWrapper">
                        <ul class="planList">
                            <li class="selected">
                                <span class="name">坦克</span>
                                <span class="description">
                                    坦克型天赋适合坦克型英雄，类似于德鲁伊或者恶魔猎手，可以吸收大量伤害！
                                </span>
                                <span class="selected"></span>
                            </li>
                            <li class="active">
                                <span class="name">坦克</span>
                                <span class="description">
                                    坦克型天赋适合坦克型英雄，类似于德鲁伊或者恶魔猎手，可以吸收大量伤害！
                                </span>
                                <span class="selected"></span>
                            </li>
                            <li>
                                <span class="name">坦克</span>
                                <span class="description">
                                    坦克型天赋适合坦克型英雄，类似于德鲁伊或者恶魔猎手，可以吸收大量伤害！
                                </span>
                                <span class="selected"></span>
                            </li>
                            <li>
                                <span class="name">坦克</span>
                                <span class="description">
                                    坦克型天赋适合坦克型英雄，类似于德鲁伊或者恶魔猎手，可以吸收大量伤害！
                                </span>
                                <span class="selected"></span>
                            </li>
                            <li>
                                <span class="name">坦克</span>
                                <span class="description">
                                    坦克型天赋适合坦克型英雄，类似于德鲁伊或者恶魔猎手，可以吸收大量伤害！
                                </span>
                                <span class="selected"></span>
                            </li>
                        </ul>
                    </div>
                    <table class="talentList">
                        <colgroup>
                            <col width="20%">
                            <col width="16%">
                            <col width="16%">
                            <col width="16%">
                            <col width="16%">
                            <col width="16%">
                        </colgroup>                        
                        <tr>
                            <td class="level">1</td>
                            <td class="talent"><img class="talentImg active" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                        </tr>
                        <tr>
                            <td class="level">4</td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg active" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                        </tr>
                        <tr>
                            <td class="level">7</td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg active" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                        </tr>
                        <tr>
                            <td class="level">10</td>
                            <td class="talent"><img class="talentImg active" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                        </tr>
                        <tr>
                            <td class="level">13</td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg active" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                        </tr>
                        <tr>
                            <td class="level">16</td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg active" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                        </tr>
                        <tr>
                            <td class="level">20</td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg" src="data/Skill/s1.png" /></td>
                            <td class="talent"><img class="talentImg active" src="data/Skill/s1.png" /></td>
                        </tr>
                    </table>
                </div>
                <div class="modal_foot">
                    <div class="selectPlan"></div>
                </div>
            </div>            
            
        </script>            
        
            
        <script id="special_template" type="text/template">
            <img id="not_install_img" src="img/not_install.png" />
            <div class="addGameButton"></div>
            <div id="not_install_tips">若本机尚未安装游戏，请先 <a href="#">去下载</a></div>
        </script>
        
        <script id="shop_template" type="text/template">
                <div id="horse_preview">
                    <img id="big_preview" src="img/shop_horse1_big.png" />
                    <ul class="">
                        <li class="color"><img src="img/shop_color_1.png" />
                        </li>
                        <li class="color "><img src="img/shop_color_2.png" />
                        </li>
                        <li class="color"><img src="img/shop_color_3.png" />
                        </li>
                    </ul>
                </div>

                <div id="selectHorse">
                    <ul class="clearfix">
                        
                        
                    </ul>
                </div>            
            
        </script>
        <script id="horse_view_template" type="text/template">
                            <img class="thumbnail" src=<%= thumbnail %> />
                            <span class="name"><%= name %></span>
                            <img class="activeImg statusImg" src="img/shop_horse_active.png" />
                            <img class="hoverImg statusImg" src="img/shop_horse_hover.png" />            
        </script>         
        <script id="talent_template" type="text/template">
            <div id="heroListWrapper">
                <ul id="heroTabs">
                    <li class="tab active" data-type="all">
                        全<br>部
                    </li>
                    <li class="tab" data-type="weekfree">
                        周<br>免
                    </li>
                    <li class="tab" data-type="wow">
                        魔<br>兽
                    </li>
                    <li class="tab" data-type="sc">
                        星<br>际
                    </li>
                    <li class="tab" data-type="diablo">
                        暗<br>黑
                    </li>
                </ul>
                <div id="heroList">
                    
                </div>
                <span class="up disabled"></span>
                <span class="down"></span>
            </div>
            <div id="mapList">
                <div class="name">迪亚波罗</div>
                <div data-mid="1" class="mapWrapper">
                    <img src="img/map_1.png" />
                    <div class="selectWrapper">
                        <select name="plan">
                            <option value="1">输出</option>
                            <option value="2">坦克</option>
                            <option value="3">法师</option>
                            <option value="4">辅助</option>
                        </select>
                    </div>
                    <div class="mapMask"><span>天赋详情</span></div>
                </div>
                <div data-mid="2" class="mapWrapper">
                    <img src="img/map_2.png" />
                    <div class="selectWrapper">
                        <select name="plan">
                            
                        </select>
                    </div>
                    <div class="mapMask"><span>天赋详情</span></div>
                </div>
                <div data-mid="3" class="mapWrapper">
                    <img src="img/map_3.png" />
                    <div class="selectWrapper">
                        <select name="plan">
                            
                        </select>
                    </div>
                    <div class="mapMask"><span>天赋详情</span></div>
                </div>
                <div data-mid="4" class="mapWrapper">
                    <img src="img/map_4.png" />
                    <div class="selectWrapper">
                        <select name="plan">
                            
                        </select>
                    </div>
                    <div class="mapMask"><span>天赋详情</span></div>
                </div>
                <div data-mid="5" class="mapWrapper">
                    <img src="img/map_5.png" />
                    <div class="selectWrapper">
                        <select name="plan">
                            
                        </select>
                    </div>
                    <div class="mapMask"><span>天赋详情</span></div>
                </div>
            </div>
        </script>
        <script id="hero_view_template" type="text/template">
                        <div class="face" >
                            <img src="<% print('data/Hero/h' + HID + '.png') %> " />
                            <img class="weekfreeImg statusImg" src="img/hero_weekfree.png" />
                            <img class="activeImg statusImg" src="img/hero_active.png" />
                            <img class="hoverImg statusImg" src="img/hero_active.png" />
                        </div>
                        <div class="info">
                            <span class="name">
                                <%=Name%>
                            </span>
                            <span class="title">
                                <i class="gameIcon <%= 'icon_'+belongsTo %>" > </i><span class="title_name"><%=Title%></span>
                            </span>
                        </div>      
        </script>
        <script id="planList_li_template" type="text/template">
                            <li class="" data-TRID="<%= TRID %>">
                                <span class="name"><%= Title %></span>
                                <span class="description">
                                    <%= Desc %>
                                </span>
                                <span class="selected"></span>
                            </li>                                    
        </script>
        
        <iframe id="firstTimeCountFrame" class="none"></iframe>
        <iframe id="everyTimeCountFrame" class="none"></iframe>
    </body>

</html>












